import MessageHandlers from "./MessageHandlers"
import MsgManager from "./msg/MsgManager";

import {move} from "./msg/msg"


export default class WebSocketClient {
    address: string;
    webSocket: WebSocket;
    public constructor(addr: string) {
        this.address = addr;

    }
    public start() {
        this.webSocket = new WebSocket(this.address);
        this.socketBindEvent();
    }
    socketBindEvent() {
        this.webSocket.onopen = this.onOpen.bind(this);
        this.webSocket.onmessage = this.onMessage.bind(this);
        this.webSocket.onerror = this.onError.bind(this);
        this.webSocket.onclose = this.onClose.bind(this);
    }
    onOpen(ev: Event) {
        console.log("webSocket连接建立成功... " + "服务端address: " + this.address);
        //连接成功 发送消息
        let testObj = {
            type: "getUserInfo"
        }

        let msg = {
            x:1,
            y:2,
            str:`当我们搞定整个Vue项目的前端编码阶段后，我们需要对我们的前端项目文件进行部署和优化工作，主要的几个方式如下：

            （1）使用webpack的DefinePlugin指定生产环境：通过plugin中的DefinePlugin配置，我们可以声明’process.env’属性为’development’(开发环境)或者’production’(生产环境)，结合npm配置文件package.json中scripts的命令来切换环境模式十分方便。
            （2）使用UglifyJs自动删除代码块内的警告语句：一般在生产环境的webpack配置文件中使用，通过new webpack.optimize.UglifyJsPlugin()来进行配置，删除警告语句可以缩减文件的体积。
            （3）使用Webpack hash处理缓存：当我们需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。这样我们需要自动的生成带hash值的文件名来阻止缓存。详见：https://segmentfault.com/a/1190000006178770#articleHeader7
            （4）使用v-if减少不必要的组件加载：v-if指令其实很有用处，它可以让我们项目中暂时不需要的组件不进行渲染，等需要用到的时候在渲染，比如某个弹窗组件等。这样我们可以减少页面首次加载的时间和文件量。
            除了以上几点的优化，还有很多优化选择，有兴趣的童鞋可以好好地了解下webpack的API文档，毕竟webpack的功能十分强大。`
        }
        // let msg = move.C2S_SyncPosition.create(pos)
        
        let msgInfo = {
            msgId:1,
            data:move.C2S_SyncPosition.encode(msg).finish()
        }
        // let blobBody = new Blob([msgInfo.data])
        let allLength = 4+4+msgInfo.data.length;
        // let buffer = new ArrayBuffer(allLength);
        let buffer = new Int8Array(8);
        
        let  view = new DataView(buffer.buffer)
        view.setInt32(0,allLength);
        view.setInt32(4,msgInfo.msgId);
        let result = new Blob([view.buffer,msgInfo.data.buffer])

        // this.sendData(JSON.stringify(testObj));
        this.sendData(result);

    }
    onMessage(event: MessageEvent) {
        console.log("收到消息：", event.data);
        if(!(event.data instanceof Blob)){
            console.log("收到非二进制数据："+event.data);
            return
        }
        let dataBlob = event.data
        dataBlob.arrayBuffer().then(v=>{
            
            let dataView = new DataView(v)
            let allLength = dataView.getInt32(0)
            let msgId = dataView.getInt32(4) 
            let body = v.slice(8,allLength)
            let result = MsgManager[1].decode(new Uint8Array(body));
            console.log(result);
            
        })
        let handlers = MessageHandlers.instance()
        // handlers[data.type](data)

    }
    onError(ev: Event) {
        console.log(ev);

    }
    onClose(ev: CloseEvent) {
        console.log("链接关闭了");
    }
    sendData(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
        this.webSocket.send(data)
    }
}